<template>
  <div>
    <el-form :model="listData" ref="listData" label-width="80px" class="demo-ruleForm">
        <!--<el-form ref="form" :model="form" label-width="80px">-->
        <!--==========================================================================================-->
      <el-form-item label="基本信息">1/6</el-form-item>
        <el-row>
          <el-col :span="16">
            <!--==========================================================================================-->
            <div class="box">
              <div class="box_content">
                <el-form-item label="姓名">
                  <el-input v-model="listData.student_name" placeholder="" :value="listData.student_name" disabled></el-input>
                </el-form-item>
              </div>
              <div class="box_content">
                <el-form-item label="性别" prop="sex">
                  <el-select :value="listData.sex.toString()" placeholder="请选择性别" disabled>
                    <el-option label="男" value="1"></el-option>
                    <el-option label="女" value="2"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <!--<div class="box_content">
                <el-form-item label="民族" prop="nation">
                  <el-input v-model="listData.phone" placeholder=""></el-input>
                </el-form-item>
              </div>-->
            </div>
            <!--<div class="box">
              <div class="box_content">
                <el-form-item label="国籍" prop="nationality">
                  <el-input v-model="listData.nationality" placeholder=""></el-input>
                </el-form-item>
              </div>
              <div class="box_content">
                <el-form-item label="出生年月" prop="birthday">
                  <el-date-picker type="date" placeholder="" v-model="listData.birthday"></el-date-picker>
                </el-form-item>
              </div>
            </div>-->
            <!--==========================================================================================-->
            <div class="box">
              <!--<div class="box_content">
                <el-form-item label="联系电话" prop="phone">
                  <el-input placeholder="" v-model="listData.phone">
                    <template slot="prepend">+86</template>
                  </el-input>
                </el-form-item>
              </div>-->
              <div class="box_content">
                <el-form-item label="证件号码" prop="number">
                  <el-input placeholder="" v-model="listData.card" class="input-with-select" disabled>
                    <el-select v-model="listData.card_type" slot="prepend" placeholder="请选择证件类型" style="width: 90px" disabled>
                      <el-option v-for="item in cardType" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </el-input>
                </el-form-item>
              </div>
            </div>
            <!--==========================================================================================-->
            <el-form-item label="家庭信息">2/6</el-form-item>
            <!--==========================================================================================-->
            <div class="box">
              <div class="box_content">
                <el-form-item label="家长姓名">
                  <el-input v-model="listData.home[0].parent_name" placeholder="" disabled></el-input>
                </el-form-item>
              </div>
              <div class="box_content">
                <el-form-item label="家长称谓">
                  <el-select v-model="listData.home[0].relation.toString()" placeholder="请选择称谓" disabled>
                    <el-option label="爸爸" value="1"></el-option>
                    <el-option label="妈妈" value="2"></el-option>
                    <el-option label="爷爷" value="3"></el-option>
                    <el-option label="奶奶" value="4"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="box_content">
                <el-form-item label="联系电话">
                  <el-input placeholder="" v-model="listData.home[0].phone" disabled>
                    <template slot="prepend">+86</template>
                  </el-input>
                </el-form-item>
              </div>
            </div>
            <!--<el-row>
              <el-col :span="6">
                <el-form-item label="家长姓名">
                  <el-input v-model="form.FatherName" placeholder=""></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="家长称谓">
                  <el-input v-model="form.DaD"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="联系电话">
                  <el-input placeholder="" v-model="form.FatherPhone">
                    <template slot="prepend">+86</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>-->
            <!--==========================================================================================-->
            <!--<div class="box">
              <div class="box_content">
                <el-form-item label="家长姓名">
                  <el-input v-model="form.MotherName" placeholder="请输入家长姓名"></el-input>
                </el-form-item>
              </div>
              <div class="box_content">
                <el-form-item label="家长称谓">
                  <el-input v-model="form.MoM"></el-input>
                </el-form-item>
              </div>
              <div class="box_content">
                <el-form-item label="联系电话">
                  <el-input placeholder="请输入" v-model="form.MotherPhone">
                    <template slot="prepend">+86</template>
                  </el-input>
                </el-form-item>
              </div>
            </div>-->
            <div class="box">
              <div class="box_content">
                <el-form-item label="" style="text-align: center">
                  <el-button type="info">添加联系人</el-button>
                </el-form-item>
              </div>
            </div>
            <!--<el-row>
              <el-col :span="6">
                <el-form-item label="家长姓名">
                  <el-input v-model="form.MotherName" placeholder=""></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="家长称谓">
                  <el-input v-model="form.MoM"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="联系电话">
                  <el-input placeholder="" v-model="form.MotherPhone">
                    <template slot="prepend">+86</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="">
                  <el-button type="info">添加联系人</el-button>
                </el-form-item>
              </el-col>
            </el-row>-->
            <!--==========================================================================================-->
            <el-form-item label="招生信息">3/6</el-form-item>
            <!--==========================================================================================-->
            <div class="box">
              <div class="box_content">
                <el-form-item label="申请学期">
                  <el-select class="select" v-model="listData.recruit.semester_id" placeholder="" disabled>
                    <el-option v-for="item in semester" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="box_content">
                <el-form-item label="申请年级">
                  <el-select class="select" v-model="listData.recruit.grade" placeholder="" disabled>
                    <el-option v-for="item in grade" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="box_content">
                <el-form-item label="申请课程">
                  <el-select class="select" v-model="listData.recruit.course_id" placeholder="" disabled>
                    <el-option v-for="item in course" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="box_content">
                <el-form-item label="所属校区">
                  <el-select class="select" v-model="listData.recruit.school_id" placeholder="" disabled>
                    <el-option v-for="item in school" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="box_content">
                <el-form-item label="招生来源">
                  <el-select class="select" v-model="listData.recruit.way" placeholder="" disabled>
                    <el-option v-for="item in channel" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="box_content">
                <el-form-item label="推荐人">
                  <el-input v-model="listData.recruit.referrer" placeholder="" disabled></el-input>
                </el-form-item>
              </div>
              <div class="box_content">
                <el-form-item label="主跟进人">
                  <el-input v-model="listData.recruit.teacher_id" placeholder="" disabled></el-input>
                </el-form-item>
              </div>
              <div class="box_content">
                <el-form-item label="副跟进人">
                  <el-select class="select" v-model="listData.recruit.deputy_teacher_id" placeholder="" disabled>
                    <el-option v-for="item in teacher2" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="box_content">
                <div class="block" style="text-align: center">
                  <span>意向度</span><el-rate disabled></el-rate>
                </div>
              </div>
            </div>
            <!--==========================================================================================-->
          </el-col>
          <el-col :span="7" style="margin-left: 20px">
            <!--<div class="box">
              <div class="box_content4">
                2020-08-05-15:29
              </div>
              <div class="box_content4">
                电话跟进
              </div>
              <div class="box_content4">
                跟进人：李丽君
              </div>
            </div>
            <div class="box">
              <div class="box_content4" style="">
                沟通内容：请输入1000字以内
              </div>
            </div>
            <div class="box">
              <div class="box_content4">
                下次沟通时间：2020-08-05-15:29
              </div>
            </div>
            <hr/>
            <div class="box">
              <div class="box_content4">
                2020-08-05-15:29
              </div>
              <div class="box_content4">
                电话跟进
              </div>
              <div class="box_content4">
                跟进人：李丽君
              </div>
            </div>
            <div class="box">
              <div class="box_content4">
                沟通内容：请输入1000字以内
              </div>
            </div>
            <div class="box">
              <div class="box_content4">
                下次沟通时间：2020-08-05-15:29
              </div>
            </div>-->
            <div>增加跟进记录：</div>
            <el-form :model="followRecord" ref="followRecord" :rules="rules" label-width="80px">
              <div class="box">
                <div class="box_content">
                  <el-form-item label="沟通时间">
                    <el-date-picker type="date" placeholder="请选择时间" style="width: 100%"></el-date-picker>
                  </el-form-item>
                </div>
                <div class="box_content">
                  <el-form-item label="沟通方式" prop="communication">
                    <el-select class="select" v-model="followRecord.communication" placeholder="请选择沟通方式" style="width: 100%">
                      <el-option label="网上" value="1"></el-option>
                      <el-option label="柜台" value="2"></el-option>
                      <el-option label="电话沟通" value="3"></el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div class="box_content">
                  <el-form-item label="沟通内容">
                    <el-input type="textarea" placeholder="" v-model="followRecord.content" maxlength="1000" show-word-limit></el-input>
                  </el-form-item>
                </div>
                <div class="box_content">
                  <el-form-item label="">
                    <div class="block">
                      意向度<el-rate v-model="followRecord.intention"></el-rate>
                    </div>
                  </el-form-item>
                </div>
                <div class="box_content">
                  <el-form-item label="">
                    <el-checkbox v-model="checked">下次沟通时间</el-checkbox>
                  </el-form-item>
                </div>
                <div class="box_content">
                  <el-form-item label="" prop="next_time">
                    <el-date-picker type="date" placeholder="请选择时间" v-model="followRecord.next_time" style="width: 100%" v-if="checked==false" disabled></el-date-picker>
                    <el-date-picker type="date" placeholder="请选择时间" v-model="followRecord.next_time" style="width: 100%" v-if="checked==true"></el-date-picker>
                  </el-form-item>
                </div>
              </div>
              <div class="box" style="text-align: center">
                <div class="box_content">
                  <el-form-item label="" prop="Time2">
                    <el-button type="primary" @click="resetForm('followRecord')">重 置</el-button>
                    <el-button type="primary" @click="submitForm('followRecord')">确 定</el-button>
                  </el-form-item>
                </div>
              </div>
            </el-form>
          </el-col>
        </el-row>
        <el-col :span="1"></el-col>
        <el-col :span="4" style="margin-left: 60px">

            <!--<el-row>
              <div style="font-size: 20px;font-weight: bold">
                增加跟进记录：
              </div>
              <el-form-item label="沟通时间" prop="Time">
                <el-date-picker type="date" placeholder="请选择时间" v-model="Talk.Time" style="width: 100%"></el-date-picker>
              </el-form-item>
              <el-form-item label="沟通方式" prop="Talk">
                <el-select class="select" v-model="Talk.Talk" placeholder="请选择沟通方式" style="width: 100%">
                  <el-option label="网上" value="1"></el-option>
                  <el-option label="柜台" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="">
                <div class="block">
                  意向度<el-rate></el-rate>
                </div>
              </el-form-item>
              <el-form-item label="沟通内容">
                <el-input type="textarea" placeholder="" v-model="Talk.Talktextarea" maxlength="1000" show-word-limit></el-input>
              </el-form-item>
              <el-form-item label="">
                <el-checkbox v-model="checked">下次沟通时间</el-checkbox>
              </el-form-item>
              <el-form-item label="" prop="Time2">
                <el-date-picker type="date" placeholder="请选择时间" v-model="Talk.Time2" style="width: 100%"></el-date-picker>
              </el-form-item>
              <el-form-item label="" prop="Time2">
                <el-button type="primary" @click="resetForm('Talk')">重 置</el-button>
                <el-button type="primary" @click="submitForm('Talk')">确 定</el-button>
              </el-form-item>
            </el-row>-->
        </el-col>
        <!--==========================================================================================-->
      <el-form-item label="学业信息">4/6</el-form-item>
        <!--==========================================================================================-->
      <div class="box">
        <div class="box_content2">
          <el-form-item label="曾读学校">
            <el-select class="select" v-model="listData.course.school" placeholder="" disabled>
              <el-option v-for="item in school" :key="item.value" :label="item.label" :value="item.label"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="语文">
            <el-input v-model="listData.course.Chinese" disabled></el-input>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="数学">
            <el-input v-model="listData.course.Mathematics" disabled></el-input>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="英语">
            <el-input v-model="listData.course.English" disabled></el-input>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="物理">
            <el-input v-model="listData.course.Physics" disabled></el-input>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="化学">
            <el-input v-model="listData.course.Chemistry" disabled></el-input>
          </el-form-item>
        </div>
      </div>
        <!--==========================================================================================-->
      <div class="box">
        <div class="box_content2">
          <el-form-item label="曾读年级">
            <el-select class="select" v-model="listData.course.grade" placeholder="" disabled>
              <el-option v-for="item in grade" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="历史">
            <el-input v-model="listData.course.History" disabled></el-input>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="地理">
            <el-input v-model="listData.course.Geography" disabled></el-input>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="政治">
            <el-input v-model="listData.course.Politics" disabled></el-input>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="生物">
            <el-input v-model="listData.course.Biology" disabled></el-input>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="信息科技">
            <el-input v-model="listData.course.computer" disabled></el-input>
          </el-form-item>
        </div>
      </div>
        <!--<el-row>
          <el-col :span="4">
            <el-form-item label="曾读年级">
              <el-select class="select" v-model="SelectGradeing" placeholder="">
                <el-option v-for="item in grade" :key="item.value" :label="item.label" :value="item.label"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="历史">
              <el-input v-model="form.History"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="地理">
              <el-input v-model="form.Geography"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="政治">
              <el-input v-model="form.Politics"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="生物">
              <el-input v-model="form.Biology"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="信息科技">
              <el-input v-model="form.Technology"></el-input>
            </el-form-item>
          </el-col>
        </el-row>-->
        <!--==========================================================================================-->
      <el-form-item label="其他学校">5/6</el-form-item>
        <!--==========================================================================================-->
      <el-row>
        <el-col :span="4">
          <el-form-item label="户籍地址" prop="province">
            <el-cascader
              ref="cascaderCity"
              :value="cityArr"
              style="width: 300px"
              v-model="realname"
              :options="options"
              disabled
              :props="{
              value: 'id',
              label: 'name',
              ...props
              }"
              @change="handleChange"
            />
          </el-form-item>
        </el-col>
      </el-row>
        <!--==========================================================================================-->
      <el-row>
        <el-col :span="24">
          <el-form-item label="地址" prop="DetailedAddress">
            <el-input v-model="listData.address" placeholder="" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!--==========================================================================================-->
      <el-row>
        <el-form-item label="备注">
          <el-input type="textarea" placeholder="" v-model="listData.remark" maxlength="1000" show-word-limit disabled></el-input>
        </el-form-item>
      </el-row>
        <!--==========================================================================================-->

        <!--==========================================================================================-->
      <el-form-item label="跟进记录">6/6</el-form-item>
      <div v-for="(item,index) in listData.follow" :key="item.index" style="font-weight: bold">
        <el-row class="selectFont">
          <el-col :span="4">
            <div>2020-08-05 15:29</div>
          </el-col>
          <el-col :span="4">
            <div v-if="item.communication==1">网上</div>
            <div v-if="item.communication==2">柜台</div>
            <div v-if="item.communication==3">电话沟通</div>
          </el-col>
          <el-col :span="4">
            <div>跟进人：{{userName}}</div>
          </el-col>
        </el-row>
        <el-row class="selectFont">
          <el-col :span="6">
            <div>{{item.content}}</div>
          </el-col>
        </el-row>
        <el-row class="selectFont">
          <el-col :span="6">
            <div>{{item.next_time}}</div>
          </el-col>
        </el-row>
        <hr/>
      </div>
      <!--==========================================================================================-->
    </el-form>
    <!--==========================================================================================-->
  </div>
</template>

<script>
  import addressData from '@/components/CascaderCity/addressData.json'
  import { addStudentRecruit,selectStudent,addStudentHome,addStudentCourse,addStudent,delStudent,addFollow } from '@/api/studentRecruit.js'
  import store from '../../../store'
    export default {
        name: 'SelectStudent',
      data(){
        return{
          userName:store.getters.name,
          ntime:'',
          realname:'',
          checked: false,
          followRecord:{
            /*单选框*/
            student_id:0,  //学生id
            communication:null, //沟通方式
            intention:0, //意向度
            content:'', //沟通内容
            next_time:'', //下次沟通时间
          },
          /*弹出框属性*/
          NewStudentFile:false,
          /*城市级联*/
          cityArr: [],
          options: [],
          isChange: false,
          form: {
            name: '', /*姓名*/
            sex: '',  /*性别*/
            nation: '', /*民族*/
            nationality: '',  /*国籍*/
            birthday: '', /*出生年月日*/
            phone: '',  /*联系电话*/
            number:'',  /*身份证号码*/
            recommend: '',  /*推荐人*/
            teacher: '',  /*主跟进人*/
            DaD: '爸爸',  /*父亲称谓*/
            MoM: '妈妈',  /*母亲称谓*/
            FatherName: '', /*父亲名字*/
            MotherName: '', /*母亲名字*/
            FatherPhone: '',  /*爸爸电话*/
            MotherPhone: '',  /*妈妈电话*/
            Chinese: '',  /*语文*/
            Math: '', /*数学*/
            English: '',  /*英语*/
            Physics: '',  /*物理*/
            Chemistry: '',  /*化学*/
            History: '',  /*历史*/
            Geography: '',  /*地理*/
            Politics: '', /*政治*/
            Biology: '',  /*生物*/
            Technology: '', /*信息科技*/
            DetailedAddress: '',  /*详细地址*/
            textarea: '',  /*备注*/
            SelectTeacher: '',
            province: []
          },
          SelectSemester: '',
          SelectGrade: '',
          SelectCourse: '',
          SelectSchool: '',
          SelectTeacher: '',
          SelectChannel: '',
          SelectTeacher2: '',
          SelectSchooling: '',
          SelectGradeing: '',
          province: [],
          city: '',
          area: '',
          /*证件*/
          cardType: [{
            value: 1,
            label: '身份证'
          }, {
            value: 2,
            label: '军官证'
          }],
          /*学期*/
          semester: [{
            value: 1,
            label: '第一学期'
          }, {
            value: 2,
            label: '第二学期'
          }],
          /*曾读学校*/
          school: [{
            value: 1,
            label: '一小'
          }, {
            value: 2,
            label: '二小'
          }],
          /*招生来源*/
          channel: [{
            value: 1,
            label: '网上'
          }, {
            value: 2,
            label: '专台'
          }],
          /*年级*/
          grade: [{
            value: 1,
            label: '一年级'
          }, {
            value: 2,
            label: '二年级'
          }],
          /*课程*/
          course: [{
            value: 1,
            label: '语文'
          }, {
            value: 2,
            label: '英语'
          }, {
            value: 3,
            label: '数学'
          }],
          /*副跟进人*/
          teacher2: [{
            value: 1,
            label: '陈老师'
          }, {
            value: 2,
            label: '李老师'
          }],
          /*表单验证*/
          rules: {
            communication: [
              { required: true, message: '不能为空', trigger: 'blur,change' }
            ],
            next_time: [
              { required: true, message: '不能为空', trigger: 'blur,change' }
            ]
          }
        }
      },
      /*城市级联*/
      props: {
        listData: {
          type: [Object],
          default: () => []
        },
        /**
         * 默认区域传入格式:
         * 非多选(props.multiple = false): 北京市/北京市/东城区
         * 多选(props.multiple = true): 北京市/北京市/东城区,广东省/广州市/天河区
         */
        value: {
          type: String,
          default: ''
        },
        /**
         * 默认是regionData
         * regionData(省市区) provinceAndCityData(省市)
         */
        optionType: {
          type: String,
          default: 'regionData',
          validator: function(value) {
            return ['regionData', 'provinceAndCityData'].indexOf(value) !== -1 // 这个值必须匹配下列字符串中的一个
          }
        },
        /**
         * 是否需要开启全国
         */
        isAddAll: {
          type: Boolean,
          default: false
        },
        placeholder: {
          type: String,
          default: ''
        },
        props: {
          type: Object,
          default() {
            return {}
          }
        }
      },
      /*城市级联*/
      watch: {
        /*监听listData*/
        listData: {
          handler(res) {
            this.realname = [res.province,res.city,res.area]
            this.followRecord.student_id=res.unid

            console.log(res)
          },
          // 代表在wacth里声明了listData这个方法之后立即先去执行handler方法
          immediate: true,
          deep: true, //代表是否深度监听
        },
        value(val) {
          if (this.isChange) {
            this.isChange = false
          } else {
            this.setDefaultCity()
            const panel = this.$refs.cascaderCity.$refs.panel
            panel.clearCheckedNodes() // 清空级联选择器选中状态
            panel.activePath = [] // 清除高亮
          }
        }
      },
      /*城市级联*/
      created() {
        this.setDefaultCity()
        this.init()
      },
      /*城市级联*/
      methods: {
        /*提交*/
        submitForm(formName) {
          console.log(this.followRecord.next_time.getFullYear()+'-'+(this.followRecord.next_time.getMonth()+1)+'-'+this.followRecord.next_time.getDate())
          this.ntime=this.followRecord.next_time.getFullYear()+'-'+(this.followRecord.next_time.getMonth()+1)+'-'+this.followRecord.next_time.getDate()
          this.followRecord.next_time=this.ntime
          console.log(store.getters.name)
          /*let addData={
            student_id:70,  //学生id
            communication:1, //沟通方式
            intention:5, //意向度
            content:'QNMLGB', //沟通内容
            next_time:'2018-11-11', //下次沟通时间
          }*/
          /*this.NewStudentFile = false*/
          /*console.log("6666666666")
          console.log(this.followRecord)
          console.log("6666666666")
          console.log(this.followRecord)*/
          this.$refs[formName].validate((valid) => {
            if (valid) {
              addFollow(this.followRecord)
              this.$message.success('跟进成功！')
            } else {
              this.$message.error('跟进失败！');
              return false;
            }
          });
        },
        /*重置*/
        resetForm(formName) {
          this.$refs[formName].resetFields();
        },
        /**
         * 初始化数据已选的数据
         */
        setDefaultCity() {
          // 判断是否有默认区域再判断是否开启多选
          const value = JSON.parse(JSON.stringify(this.value))
          let data = []
          if (value !== '' && typeof value === 'string') {
            if (this.props.multiple) {
              data = value.split(',').map(item => {
                return this.handleDefaultRegion(item)
              })
            } else {
              data = this.handleDefaultRegion(value)
            }
          }
          this.cityArr = data
        },
        /**
         * 字符串拆分出数组
         */
        handleDefaultRegion(value) {
          return value.split('/')
        },
        /**
         * 将数组拼接回字符串
         */
        handleRegionStr(value) {
          let str = ''
          value.forEach(item => {
            str += item + '/'
          })
          return str.slice(0, str.length - 1)
        },
        /**
         * 初始化省市区数据
         */
        init() {
          const cityData = JSON.parse(JSON.stringify(addressData)) // 避免JSON源被改变
          if (this.isAddAll) {
            cityData.unshift({ id: 0, name: '全国' }) // 插入全国选项
          }
          switch (this.optionType) {
            case 'regionData': // 省市区
              this.options = cityData
              break
            case 'provinceAndCityData': // 省市
              this.options = cityData.map(item => {
                if (item.children) {
                  item.children.map(item1 => {
                    item1.children = null // 删除一个最后个区
                    return item1
                  })
                }
                return item
              })
              break
            default:
              console.error('请选择正确的optionType！')
              break
          }
        },
        handleChange(event) {
          this.$emit('change', event)
          this.cityArr = event
          let str = ''
          if (this.props.multiple) { // 多选
            event.forEach(item => {
              str += this.handleRegionStr(item) + ','
            })
            str = str.slice(0, str.length - 1)
          } else {
            str = this.handleRegionStr(event)
          }
          this.isChange = true
          this.$emit('input', str)
          console.log('选中:', event)
        }
      }
    }
</script>

<style scoped>
  .selectFont{
    font-size: 15px;
  }
  .box{
    width: 100%;
    display: flex;
    flex-direction: row;
    /*//两侧对齐*/
    justify-content:space-between;
    /*//自动换行*/
    flex-wrap: wrap;
    /*//清除上下行的中间空隙*/
    align-content: flex-start;
  }
  .box_content{
    flex: 30 0 250px;
  }
  .box_content2{
    flex: 30 0 200px;
  }
  .box_content4{
    flex: 30 0 120px;
    margin-bottom: 10px;
    font-size: 15px;
  }
  /*//解决最后一行的问题*/
  .box:after{
    content: '';
    width: 30%;
  }
</style>
